<style scoped>
.cart_outer{align-items: stretch;padding: 8px;background: #fff;}
.cart_row{align-items: stretch;padding-bottom: 5px;}
/*.cart_row{background: #fff;margin: 6px auto;width: 350px;border-radius: 13px;}*/
.cart_row>.select{padding: 0 5px;}
.cart_row>.img{width: 100px;height: auto;}
.cart_row>.content{flex-direction: column;align-items: stretch;padding: 1px 4px 1px 8px;}
.cart_row .price{text-align: right;color: #ff9200;font-weight: bold;}
.cart_row .price>.sm{font-size: 0.7em;}
.cart_row .sales{text-align: right;opacity: 0.8;font-size: 0.8em;}

.additional_outer{width: 100%;overflow-x: scroll;padding-bottom: 5px;}
.additional_outer::-webkit-scrollbar{display: none;}
.additional_inner>.item{margin-left: 5px;}

.button-padding{padding: 20px 10px;}
</style>
<template>
  <HeaderSlot>
    <van-nav-bar :title="$t(this_action.label)" left-arrow @click-left="href_handle(-1)" />
  </HeaderSlot>
  <form_param :config="form_config" :submit="submit" ref="form">
    <template #_cart_row_="{row}">
      <div class="cart_outer">
        <div class="cart_row flex">
          <img-referrer class="img" :src="_href(row.value.head_img)" :alt="row.value.title" draggable="false"/>
          <div class="content max flex">
            <h4>{{row.value.title}}</h4>
            <div class="sku">{{row.value.sku_title}}</div>
            <p class="max"></p>
            <div class="flex" style="justify-content: space-between;">
              <p class="price">
                <span class="sm">￥</span>{{row.value.price}}
                <span></span>
              </p>
              <p class="num">数量：{{row.value.num}}</p>
            </div>
          </div>
        </div>
        <div class="additional_outer" v-if="row.value.additional_select_map" @click.stop="select_additional">
          <div class="additional_inner flex">
            <van-button class="item" v-for="v in row.value.additional_select_map" type="primary"  hairline size="small" >
              <p>{{v.title}} X{{v.num}}</p>
              <p class="money">{{Number(v.final_all_price).toFixed(2)}}</p>
            </van-button>
          </div>
        </div>
      </div>
    </template>

    <template #submit v-if="this_action.type !== 'info'">
      <div class="button-padding">
        <van-button block round type="primary" native-type="submit">{{ this_action.label }}</van-button>
      </div>
    </template>
  </form_param>
</template>

<script>
import form_param from "@/components/form_param.vue"
import router, {_get, href_handle} from "@/vue_plugin/router_auto.js";
import {ajax, pay_handle} from "@/js/api_tool.js";
import {_href} from "@/js/s94_tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";
import HeaderSlot from "@/components/slot/HeaderSlot.vue";

export default {
  components: {HeaderSlot, ImgReferrer, form_param},
  props: {
    model: Object,
    this_action: Object,
    is_admin: Boolean,
  },
  data(){
    return {
      id: _get("id",0),
      form_config: [],
      form_data: {},
    }
  },
  methods:{
    href_handle,
    _href,
    submit(form_data){
      return new Promise((resolve, reject)=>{
        let url = `/${this.is_admin?'admin':'home'}/${this.model.name}/${this.this_action.action}?id=${this.id}`;
        if (this.this_action.type === "pay"){
          pay_handle(url, form_data, ()=>{
            setTimeout(()=>{ router.back(); }, 1000);
          },(res)=>{
            if (res?.errors) reject(res.errors);
          });
        }else {
          ajax({url:url, data:form_data, loading:1, method:'POST'}, (res)=>{
            setTimeout(()=>{ router.back(); }, 1000);
          },(res)=>{
            reject(res.errors)
          })
        }
      })
    },
    get_data(){
      let form_data = {};
      Object.values(this.form_config).forEach(row=>{
        if (!row.name || row.can_edit!=1) return;
        form_data[row.name] = row.value;
      })
      this.form_data = form_data;
      return this.form_data;
    },
    change_after(){
      this.get_data();
      this.init();
    },
    init(){
      let form_data = this.get_data();
      let init_need_param = this.this_action.init_need_param ? this.this_action.init_need_param.split(",") : [];
      let group_config = [
        {type:"_cart_row_", value: {}, br:true, include_name:["title","head_img","num","price",'sku_title','additional_select_map']}
      ];
      let url = `/${this.is_admin?'admin':'home'}/${this.model.name}/${this.this_action.action}?id=${this.id}&_is_init_=1`;
      ajax({url:url, data:form_data, method:"post"}, (res)=>{
        let extend_config = {};
        if (this.this_action.type === 'info') extend_config.is_info = true;
        this.form_config = [];
        Object.values(res.data).forEach((row)=>{
          Object.assign(row, extend_config);
          // 编辑value
          if (row.name in form_data) row.value = form_data[row.name];
          // 处理 init_need_param
          if (~init_need_param.indexOf(row.name)){
            row.onchange = this.init;
          }

          let in_group = group_config.some((gc_row)=>{
            if (~gc_row.include_name.indexOf(row.name)){
              gc_row.value[row.name] = row.value;
              if (Object.keys(gc_row.value).length<=1) { //第一次遇到属于gc_row的参数时，把gc_row加入到form_config
                this.form_config.push(gc_row);
              }
              return true;
            }
          })
          if (!in_group) this.form_config.push(row);
        });
      })
    },

  },
  computed:{},
  mounted(){
    this.init();
  }
}
</script>